<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="css/index_1.css">
    <script type="text/javascript">
        function refresh() {
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    procQueryResponse(this.responseText);
                }
            };
            xhttp.open("GET", "/courses", true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();
        }

        function procQueryResponse(responseText) {
            const obj = JSON.parse(responseText);
            if (obj.success) {
                const tblBody = document.getElementById('courses');
                tblBody.innerHTML = '';
                for (let course of obj.data) {
                    const tr = document.createElement('tr');
                    const td = document.createElement('td');
                    td.innerText = course.id;
                    const td2 = document.createElement('td');
                    td2.innerText = course.courseName;
                    const td3 = document.createElement('td');
                    td3.innerText = course.teacherName;

                    const td4 = document.createElement('td');
                    const iptDel = document.createElement('input');
                    iptDel.type = 'button';
                    iptDel.value = '删除';
                    iptDel.addEventListener('click', function () {
                        onDelete(course);
                        return false;
                    });
                    const iptUpdate = document.createElement('input');
                    iptUpdate.type = 'button';
                    iptUpdate.value = '修改';
                    iptUpdate.addEventListener('click', function () {
                        update(course);
                        return false;
                    });
                    td4.appendChild(iptDel);
                    td4.appendChild(iptUpdate);
                    tr.appendChild(td);
                    tr.appendChild(td2);
                    tr.appendChild(td3);
                    tr.appendChild(td4);
                    tblBody.appendChild(tr);
                }
            }
        }

        function onDelete(course) {
            console.log('删除中...');
            console.log(course);
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    const obj = JSON.parse(this.responseText);
                    console.log(obj);
                    if (obj.success) {
                        alert('删除成功！');
                        refresh();
                    } else {
                        alert('删除失败！');
                    }
                }
            }
            xhttp.open("POST", "/course/delete?id=" + course.id, true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();
        }

        function add() {
            const iptId = document.getElementById('iptId');
            const iptCourseName = document.getElementById('iptCourseName');
            const iptTeacherName = document.getElementById('iptTeacherName');
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    const obj = JSON.parse(this.responseText);
                    console.log(obj);
                    if (obj.success) {
                        alert('添加成功！');
                        refresh();
                    } else {
                        alert('添加失败！');
                    }
                }
            }
            //xhttp.open("POST","/course/add?courseName=" + iptCourseName.value + '&teacherName=' + iptTeacherName.value,true);
            // xhttp.open("POST","/course/add?courseName="+iptCourseName.value+'&teacherName='+iptTeacherName.value,true);
            xhttp.open("POST", "/course/add?id=" + iptId.value + '&courseName=' + iptCourseName.value + '&teacherName=' + iptTeacherName.value, true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();
        }

        function update(course) {
            console.log('更新中...');
            const iptCourseName = document.getElementById('iptCourseName');
            const iptId = document.getElementById('iptId');
            const iptTeacherName = document.getElementById('iptTeacherName');
            iptCourseName.value = course.courseName;
            iptId.value = course.id;
            iptTeacherName.value = course.teacherName;
        }

        function onUpdate() {
            const iptId = document.getElementById('iptId');
            const iptCourseName = document.getElementById('iptCourseName');
            const iptTeacherName = document.getElementById('iptTeacherName');

            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    const obj = JSON.parse(this.responseText);
                    console.log(obj);
                    if (obj.success) {
                        alert('修改成功！');
                        refresh();
                    } else {
                        alert('修改失败！');
                    }
                }
            }
            // xhttp.open("POST","/student/add?name=" + iptName.value + '&sex=' + iptSex.value+'&phone=' + iptPhone.value,true);
            // xhttp.open("PUT","/student/update?name=" + iptName.value +'&sex=' + iptSex.value + '&id=' + iptId.value,true);
            //xhttp.open("PUT","/course/update?courseName=" + iptCourseName.value + '&teacherName=' + iptTeacherName.value + '&id=' + iptId.value,true);
            xhttp.open("PUT", "/course/update?courseName=" + iptCourseName.value + '&teacherName=' + iptTeacherName.value + '&id=' + iptId.value, true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();

        }

        function getById() {
            const iptId = document.getElementById('iptId');
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    procQueryResponse(this.responseText);
                }
            };
            xhttp.open("GET", "/course?id=" + iptId.value, true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();

        }

        var xhttp = new XMLHttpRequest();
        window.onload = function () {
            refresh();
        }
    </script>
    <style>
        div {
            display: inline-block;
        }
    </style>
</head>
<body>
<div>
    <form>
        <table style="width: 100%" ;>
            <thead>
            <tr>
                <th>课程管理</th>


            </tr>
            </thead>
        </table>
        <br>
        <button class="btn" data-type="search" id="searchStudent">搜索</button>
        <br>

        <div>
            <label for="iptId">Id</label>
            <input id="iptId" type="text" placeholder="输入课程id号" name="id">
        </div>
        &emsp;
        <div>
            <label for="iptCourseName">课程名称</label>
            <input id="iptCourseName" type="text" placeholder="输入课程名称" name="courseName">
        </div>
        &ensp;&emsp;
        <div>
            <label for="iptTeacherName">教师名称</label>
            <input id="iptTeacherName" type="text" placeholder="输入教师名称" name="teacherName">
        </div>
        &emsp;
    </form>
    <input type="button" value="添加" class="btn" onclick="add();">
    <input type="button" value="刷新" class="btn" onclick="refresh()">
    <input type="button" value="查询" class="btn" onclick="getById()">
    <input type="button" value="确认修改" class="btn" onclick="onUpdate()">
    <table>
        <thead>
        <tr>
            <th>课程Id</th>
            <th>课程名称</th>
            <th>教师名称</th>
        </tr>
        </thead>
        <tbody id="courses">

        </tbody>
    </table>
</div>
</body>
</html>